<%--
  Created by IntelliJ IDEA.
  User: zjc
  Date: 2020/9/23
  Time: 13:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<head>
    <title>教室信息管理</title>
</head>
<body>
<div>
    <a class='btn btn-primary' href="http://localhost:8080/hjxy9/class/add">添加</a>
</div>
<div class="margin">
    <table class="table">
        <thead><tr>
            <td style="width: 25%">教室编号</td>
            <td style="width: 25%">教室名</td>
            <td style="width: 25%">教室状态</td>
            <td style="width: 25%">操作</td>
        </tr></thead>
        <tbody id="tb">

        </tbody>
    </table>
</div>
<!-- 分页区域-->
<div class="margin">
    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="2" selected="selected">2</option>
    <option value="5">5</option>
    <option value="10">10</option>
</select>条数据，当前是第<span id="currentPageSpan"></span>页，
    总共<span id="totalPageSpan"></span> 页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="prePage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastPage()">尾页</button>
</div>
<!-- 这里的div做一个编辑用户信息的模态框-->
<div class="modal" id="editModal">
    <!-- 对话模态框-->
    <div class="modal-dialog">
        <div class="modal-content">
    <div class="modal-header">
        <h4>教室信息管理</h4>
    </div>
    <div class="modal-body">
        <label class="control-label">教室编号</label>
        <label class="control-label">教室名</label>
        <input class="form-control" type="text" id="nameInput" placeholder="请输入教室名">
        <label class="control-label">state</label>
        <select id="sexSelect" class="form-control"><option value="0">无人使用</option>
            <option value="1">使用中</option> </select>
    </div>
    <div class="modal-footer">
        <button class="button" data-dismiss="modal">取消</button>
        <button class="button" onclick="editConfirm()">确定</button>
    </div>
</div>
</div>
</div>


<div class="modal" id="addmodel">
    <!-- 对话模态框-->
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>教室信息管理</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">教室编号</label>
                <label class="control-label">教室名</label>
                <input class="form-control" type="text" id="name" placeholder="请输入教室名">
                <label class="control-label">state</label>
                <select id="sex" class="form-control"><option value="0">无人使用</option>
                    <option value="1">使用中</option> </select>
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="editConfirm()">确定</button>
            </div>
        </div>

    </div>
</div>
<script>
    //当前页码
    var currentPage = 1;
    //每页的记录个数
    var pageSize = 2;
    //总共有多少页
    var totalPage;
    $(function () {
         loadList();
       // loadListByPage();
    });
    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        loadListByPage();
    }
    //首页的回调方法
    function firstPage() {
        currentPage = 1;
        loadListByPage();
    }
    //上一页回调方法
    function prePage() {
        currentPage--;
        if(currentPage < 1){
            currentPage = 1;
        }
        loadListByPage();
    }
    //下一页回调方法
    function nextPage() {
        currentPage++;
        if(currentPage > totalPage){
            currentPage = totalPage;
        }
        loadListByPage();
    }
    //尾页回调方法
    function lastPage() {
        currentPage = totalPage;
        loadListByPage();
    }

    function showList(classroomList) {
        console.log(JSON.stringify(classroomList));
        var html = '';
        //遍历userList数组
        for(var i=0; i<classroomList.length; i++){
            //拿到一个用户信息
            var item = classroomList[i];
            console.log(JSON.stringify(item))
            html+="<tr>";
            html+="<td>" + item.classroomId +"</td>"; //显示用户的id
            html+="<td>" + item.name +"</td>"; //显示用户的姓名
            if(item.sex == 1){
                html+="<td>使用中</td>";
            }else{
                html+="<td>无人使用</td>";
            }
            html += "<td>" +
                "<button class='btn btn-yellow' onclick='updateByClassroom(\""+item.classroomId+"\")'>编辑</button>" +
                "<button class='btn btn-danger' onclick='deteleClassroom(\"" + item.classroomId + "\")'>删除</button></td>";
            html+="</tr>";
        }
        $("#tb").html(html);
    }
    //加载用户列表数据
    function loadList() {
        $.ajax({
            url: "${pageContext.request.contextPath}/class/getlist",
            type: 'get',
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    showList(result.classroomList);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //显示模态框
    function showEditModel() {
            $("#userIdInput").val(college.collegeId);
        $("#nameInput").val(college.collegeName);
        $("#userIdInput").val(0);
        $("#nameInput").val("");

        $("#editModel").modal("show");
    }

    //分页加载用户列表数据
    function loadListByPage() {
        $.ajax({
            url: "${pageContext.request.contextPath}/classroom/getListByPage",
            type: 'get',
            data: {"currentPage":currentPage,"pageSize":pageSize},
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    showList(result.classroomList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

<%--   //增加教室--%>
    function addClassroom() {
        $.ajax({
            url: "${pageContext.request.contextPath}/classroom/addClassroom         ",
            type: 'get',
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    showList(result.classroomList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    // function addUser() {
    //     //显示用户编辑的模态框
    //     showEditModal();
    // }
    //获取一个用户的详细信息
    function getUserDetail(classroomId){
        $.ajax({
            url: "${pageContext.request.contextPath}/classroom/getone",
            type: 'get',
            data:{"classroomId":classroomId}, //传递用户id
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    //显示用户编辑模态框
                    showEditModal(result.classroom);
                }else{
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    //显示用户编辑的模态框
    function showEditModal(user) {
        if (user != null) {
            $("#classroomIdInput").val(classroom.classroomId); //传递userId
            $("#nameInput").val(classroom.name); //编辑用户姓名
            $("#sexSelect").val(classroom.state); //根据sex的值来选中select的option
        }else{
            //数据归0
            $("#classroomIdInput").val(0); //userId
            $("#nameInput").val(""); //用户姓名
            $("#stateSelect").val(0); //根据sex的值来选中select的option
        }
        $("#editModal").modal("show");
    }

    function editConfirm(){
        var classroomIdValue = $("#classroomIdInput").val();
        var nameValue = $("#classroomInput").val();
        var stateValue = $("#stateSelect").val();
        var dataValue = {classroomId:classroomIdValue, name:nameValue,state:stateValue};
        $.ajax({
            url: "${pageContext.request.contextPath}/class/edit",
            type: 'post', //使用post提交大量数据
            contentType: 'application/x-www-form-urlencoded', //指明是个普通表单提交
            data:dataValue, //传递用户编辑后的信息
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    //再次分页加载数据并显示在页面上
                    $("#editModal").modal("hide");//关闭模态编辑框
                    loadListByPage();
                }else{
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    function deteleClassroom(classroomId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/class/delete",
            type: 'get', //使用post提交大量数据
            dataType:'json',
            contentType: 'application/x-www-form-urlencoded', //指明是个普通表单提交
            data:{"classroomId":classroomId}, //传递用户id
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    alert("删除成功");
                    //  var index=parent.layer.getFrameIndex(window.name);
                    //  //如何刷新父窗口（将新增的数据实时展现出来）
                    // // parent.location.reload();
                    //  //关闭当前窗口
                    //  parent.layer.close(index);
                    window.location.reload();
                }
            },
            error:function (err) {
                alert(22313);
            }
        });
    }
</script>
</body>
</html>
